import React, { useState } from "react";
import { Modal, Button, Radio, Switch } from "antd";

export default function Edit() {

  function handleChange(value) {
    console.log(`selected ${value}`);
  }


  const [visible, setVisible] = useState(false);
  return (
    <span>
      <a type="primary" onClick={() => setVisible(true)}>编辑</a>
      <Modal title="修改信息" centered width={ 1000 } visible={visible} onOk={() => setVisible(false)} onCancel={() => setVisible(false)}>
      <div className="modalBox">
        <div className="zuo">
          <div><span>* 机构名称：</span><input/></div>
          <div><span>* 机构ID：</span><input placeholder="系统自动生成" disabled/></div>
          <div><span>* 地址：</span><input/></div>
          <div><span>* 电话：</span><input/></div>
          <div><span>* 机构图片：</span></div>
        </div>
        <div className="you">
          <div><span>* 所在城市：</span>
            <select defaultValue="全部" style={{ width: 90 }} onChange={handleChange}>
              <option value="全部">全部</option>
              <option value="四川省">四川省</option>
              <option value="广东省">广东省</option>
            </select>
            <select defaultValue="全部" style={{ width: 90 }} onChange={handleChange}>
              <option valsue="全部">全部</option>
              <option value="成都市">成都市</option>
              <option value="深圳市">深圳市</option>
            </select></div>
          <div><span>* 机构类型：</span>
              <select defaultValue="全部" style={{ width: 150 }} onChange={handleChange}>
                <option value="全部">全部</option>
                <option value="二甲医院">二甲医院</option>
                <option value="三甲医院">三甲医院</option>
                <option value="专门体检机构">专门体检机构</option>
              </select></div>
          <div><span>* 机构属性：</span><Radio className="radio">免预约</Radio></div>
          <div><span>* 是否启用：</span>
            <Switch className="kaiguan" checkedChildren="开启" unCheckedChildren="关闭" defaultChecked />
          </div>
        </div>
      </div>
      </Modal>
    </span>
  );
}